<template>
  <el-drawer
    v-if="props.type === 'drawer'"
    v-model="visible"
    :close-on-click-modal="false"
    :size="Array.isArray(props.size) ? `${props.size?.[0] || 720}px` : props.size"
    modal-class="bc-modal"
    :title="props.title"
  >
    <div class="bc-modal-drawer">
      <slot></slot>
    </div>
    <div class="bc-modal-footer">
      <slot name="footer">
        <div class="not-footer"></div>
      </slot>
    </div>
  </el-drawer>

  <el-dialog
    v-else-if="props.type === 'dialog'"
    v-model="visible"
    :close-on-click-modal="false"
    :width="`${props.size?.[0] || 720}px`"
    modal-class="bc-modal"
    :top="`calc(50vh - ${(45 + (props.footer ? 53 : 0) + (props.size?.[1] ?? 0)) / 2}px)`"
    :title="props.title"
  >
    <div class="bc-modal-dialog" :style="{ height: `${props.size?.[1] || 240}px` }">
      <slot></slot>
    </div>
    <div class="bc-modal-footer">
      <slot name="footer">
        <div class="not-footer"></div>
      </slot>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: 'drawer',
  },
  size: {
    type: [String, Number, Array],
    default: [766, 240],
  },
  title: {
    type: String,
    default: '',
  },
  footer: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:modelValue', 'close'])

// 使用计算属性实现双向绑定
const visible = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value)
    if (!value) {
      emit('close')
    }
  },
})
</script>

<style lang="scss" scoped>
.bc-modal-drawer {
  height: 100%;
  overflow-y: auto;
  padding: 12px 16px;
}
.bc-modal-dialog {
  overflow: auto;
  padding: 16px 22px;
}
.bc-modal-footer:not(:has(.not-footer)) {
  border-top: #f0f0f0 1px solid;
  padding: 10px 16px;
  background-color: #fff;
  text-align: right;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
</style>
